<template>
    <div class="container">
      <div class="left-side">
        <div class="panel">
          <!-- <Banner /> -->
          <DataPanel />
          <domainChart />
          
        </div>
        <div class="panel" style="margin-top: 10px;">
<dataofbad/>
        </div>
        
        <a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
          <a-grid-item
            :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
          >
            <PopularContent />
          </a-grid-item>
          <a-grid-item
            :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
          >
            <CategoriesPercent />
          </a-grid-item>
        </a-grid>
      </div>
      <div class="right-side">
        <a-grid :cols="24" :row-gap="16" >
         
          <a-grid-item class="panel_ip_top" :span="24" >
            <ip_top />
          </a-grid-item>
          <a-grid-item class="panel" :span="24">
            <domain_top />
          </a-grid-item>
          <a-grid-item class="panel" :span="24">
            <vps_top />
          </a-grid-item>
        </a-grid>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
    // import Banner from './components/banner.vue';
    import DataPanel from './numberdata.vue';
    import domainChart from './newdomain.vue';
import vps_top from './vps_top.vue'
import ip_top from './ip_top.vue';
import domain_top from './domain_top.vue';
import dataofbad from './dataofbad.vue'
  </script>
  
  <script lang="ts">
    export default {
      name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
    };
    
  </script>
  
  <style lang="less" scoped>
    .container {
      background-color:  rgba(255, 255, 255, 0.2);
      
      // background-color: var(--color-fill-2);
      // padding: 10px 20px;
      padding-bottom: 0;
      display: flex;
    }
  
    .left-side {
      flex: 1;
      overflow: auto;
    }
  
    .right-side {
      width: 280px;
      margin-left: 16px;
    }
  .panel_ip_top{
    background-color: #232324;
      // background-color: var(--color-bg-2);
      border-radius: 4px;
      overflow: auto;
      padding-top:0 ;
      margin-top: 0;
  }
    .panel {
      background-color: #232324;
      // background-color: var(--color-bg-2);
      border-radius: 4px;
      overflow: auto;
    }
    
    .rank{
      padding-top:10px ;
    }
    :deep(.panel-border) {
      margin-bottom: 0;
      border-bottom: 1px solid rgb(var(--gray-2));
    }
    .moduler-wrap {
      border-radius: 4px;
      background-color: var(--color-bg-2);
      :deep(.text) {
        font-size: 12px;
        text-align: center;
        color: rgb(var(--gray-8));
      }
  
      :deep(.wrapper) {
        margin-bottom: 8px;
        text-align: center;
        cursor: pointer;
  
        &:last-child {
          .text {
            margin-bottom: 0;
          }
        }
        &:hover {
          .icon {
            color: rgb(var(--arcoblue-6));
            background-color: #e8f3ff;
          }
          .text {
            color: rgb(var(--arcoblue-6));
          }
        }
      }
  
      :deep(.icon) {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-bottom: 4px;
        color: rgb(var(--dark-gray-1));
        line-height: 32px;
        font-size: 16px;
        text-align: center;
        background-color: rgb(var(--gray-1));
        border-radius: 4px;
      }
    }
  </style>
  
  <style lang="less" scoped>
    // responsive

    .mobile {
      .container {
        display: block;
      }
      .right-side {
        // display: none;
        width: 100%;
        margin-left: 0;
        margin-top: 16px;
      }
    }
  </style>
  